<template>
  <el-dialog title='技能组对应交易关系维护' :visible.sync='isShow' width='700px' :lock-scroll=false :close-on-click-modal=false @close='clearForm("queryForm")' @open="initializtaion">
    <div v-loading="loading">
      <div class="detailInfo">
        <el-card class='type-info-box-card'>
          <el-row>
            <el-col :lg='24'>
              <el-form ref='queryForm' size='mini' :model="queryForm" label-width="140px" label-position="center" :rules="rules">
                <el-row :gutter="50">
                  <el-col :span='100'>
                    <el-form-item label='技能组名称' prop='BUSITYPE'>
                      <el-select v-model='queryForm.BUSITYPE' filterable style="width:350px" disabled>
                        <el-option v-for='item in AGENTIDS' :key='item.BUSITYPE' :label='item.BUSITYPENAME' :value='item.BUSITYPE'>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="0">
                  <el-col :span='400'>
                    <el-form-item label='交易名称' prop='handleSelectValue'>
                      <!-- <div style="height:40px">
                                </div>
                                  <el-transfer  v-model="queryForm.handleSelectValue" :props="{key:'value',label:'desc'}" :data="BUSITYPEPOOL" :titles="['交易列表','已选交易']" filter-placeholder="请选择交易"  style="width:550px;margin-left: -70px; padding-bottom:10px" >
                                  </el-transfer> -->
                      <el-select v-model='queryForm.handleSelectValue' filterable style="width:350px">
                        <el-option v-for='item in BUSITYPEPOOL' :key='item.value' :label='item.desc' :value='item.value'>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="50">
                  <el-col :span='100'>
                    <el-form-item label='视频处理标志' prop='VIDEOFLAG'>
                      <el-radio-group v-model='queryForm.VIDEOFLAG'>
                        <el-radio label="0">不开启音视频</el-radio>
                        <el-radio label="1">开启音视频</el-radio>
                        <el-radio label="2">开启音频</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div slot="footer" style="margin:10px 0;text-align:center">
        <el-button size="mini" @click="isShow=false">取消</el-button>
        <el-button type='primary' size='mini' @click="submit">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import DateUtils from '@/CTManage/utils/DateUtils';
  import request from "@/common/utils/requestCT";
  import cloudTellerAdd from "@/message/CTManage/teller/cloud-teller-add";
  import selectTree from "@/components/selectTree2/";
  import getGlobalParams from '@/common/utils/getGlobalParams';
  import spinnerList from "@/message/spinnerDataQuery/spinner-data-query";
  // import TellerSkillQuery from "@/message/CTManage/skill/teller-skill-query";
  import cloudTellerQuery from "@/message/CTManage/teller/cloud-teller-query";
  import tellerMatchSkillUpdate from "@/message/CTManage/skill-transaction/skill-transaction-update";
  //交易信息查询
  import transactionNameQuery from "@/message/shared/transaction-name-query";
  //技能组信息
  import TellerSkillQuery from "@/message/CTManage/skill/teller-skill-query";
  import channelTransaction from "@/message/CTManage/skill-transaction/skill-transaction-query";
  export default {
    components: {
      selectTree
    },
    data() {
      return {
        rules: { //表单校验规则
          BUSITYPE: [{
              required: true,
              message: "请选择技能组",
              trigger: "change"
            }
            // {
            //   require: false,
            //   validator: virtualTellerCheck,
            //   trigger: "change"
            // }
          ],
          // WORKDAY: [{
          //   required: true,
          //   message: "请选择工作日是否可用",
          //   trigger: "blur"
          // }],
          // HOLIDAY: [{
          //   required: true,
          //   message: "请选择节假日是否可用",
          //   trigger: "blur"
          // }],
          handleSelectValue: [{
            required: true,
            message: "请选择交易",
            trigger: "blur"
          }]
        },
        SkillID: '',
        loading: false,
        brno: [],
        querySkills: [],
        BUSITYPEPOOL: [],
        oldBUSITYPE: '',
        queryForm: { //表单数据
          VIDEOFLAG: '',
          BUSITYPE: '',
          handleSelectValue: '',
        },
        AGENTIDS: [],
      };
    },
    props: {
      option: Object,
      message: Array
    },
    methods: {
      initializtaion() {
        this.queryForm.BUSITYPE = this.message[0].BUSITYPE;
        this.queryForm.handleSelectValue = this.message[0].FLOWID
        this.queryForm.VIDEOFLAG = this.message[0].VIDEOFLAG
        this.SkillID=this.message[0].ID
        // console.log("ddddd",this.message[0].ID);
        // this.queryForm.handleSelectValue = this.message[0].FLOWID.split(",");
        // console.log("flowid",this.message[0].FLOWID);
        // for(let i=0;i<this.queryForm.handleSelectValue.length;i++){
        //   this.queryForm.handleSelectValue[i] = parseInt(this.queryForm.handleSelectValue[i]);
        // }
        // this.oldBUSITYPE = this.message[0].FLOWID;
      },
      generateData() {
        const data = [];
        for (let i = 0; i < this.querySkills.length; i++) {
          data.push({
            value: this.querySkills[i].FLOWID,
            desc: this.querySkills[i].FLOWNAME,
          })
        };
        this.BUSITYPEPOOL = data;
      },
      async queryTeller(nodeVal, nodeObj) {
        console.log(nodeVal, nodeObj)
        let resBodyTellerQuery = new TellerSkillQuery();
        let responseTellerQuery = await request(resBodyTellerQuery);
        if (responseTellerQuery.SYS_HEAD.ReturnCode == "000000") {
          this.AGENTIDS = responseTellerQuery.RSP_BODY.resultSet;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + responseTellerQuery.SYS_HEAD.ReturnCode + "，错误信息：" + responseTellerQuery.SYS_HEAD.ReturnMessage
          });
        }
      },
      submit() {
        this.$refs["queryForm"].validate(valid => {
          if (valid) {
            this.loading = true;
            let resBody = new tellerMatchSkillUpdate();
            resBody.data.FLOWID = this.queryForm.handleSelectValue.toString().replace("\"", "").replace("[", "").replace("]", "");
            resBody.data.BUSITYPE = this.queryForm.BUSITYPE;
            resBody.data.oldFLOWID=this.message[0].FLOWID
            resBody.data.VIDEOFLAG = this.queryForm.VIDEOFLAG
            resBody.data.ID = this.SkillID
            request(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  this.loading = false;
                  this.$message({
                    type: "success",
                    message: "技能组对应交易新增成功!"
                  });
                  this.isShow = false;
                  this.$emit("refreshTable");
                } else {
                  this.$message({
                    type: "error",
                    message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
                  });
                  this.loading = false;
                }
              })
              .catch(error => {
                this.loading = false;
                console.log(error);
              });
          }
        });
      },
      clearForm(item) {
        if (this.$refs.queryForm) {
          this.$refs.queryForm.resetFields();
          this.$refs.queryForm.clearValidate();
        }
      }
    },
    computed: {
      isShow: {
        get: function() {
          return this.option.isShow;
        },
        set: function(newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    async created() {
      // let resBody = new spinnerList();
      // resBody.data.spinnerList = [{
      //   spinnerName: "branch"
      // }];
      // let response = await request(resBody);
      // if (response.SYS_HEAD.ReturnCode == "000000") {
      //   this.brno = response.RSP_BODY.branchSpinner;
      // } else {
      //   this.$message({
      //     type: "error",
      //     message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
      //   });
      // };
      this.queryTeller();
      //这里是交易信息查询
      let resBodySkills = new transactionNameQuery();
      resBodySkills.QueryPageNo = this.currentPage;
      resBodySkills.QueryRowNum = this.pageSize;
      let responseSkills = await request(resBodySkills);
      if (responseSkills.SYS_HEAD.ReturnCode == "000000") {
        this.querySkills = responseSkills.RSP_BODY.resultSet;
        this.generateData();
      } else {
        this.$message({
          type: "error",
          message: "请求失败，错误码:" + responseSkills.SYS_HEAD.ReturnCode + "，错误信息：" + responseSkills.SYS_HEAD.ReturnMessage
        });
      }
    }
    // mounted() {
    //   window.addEventListener("scroll", this.handleScroll);
    // }
  };
</script>

<style lang="scss" scope>
  .isShow {
    display: none;
  }
  .returnBtn {
    width: 50px;
    height: 50px;
    background: #000;
    opacity: 0.5;
    position: fixed;
    right: 45px;
    bottom: 53px;
    border-radius: 3px;
    text-align: center;
    padding-top: 15px;
  }
  .returnBtn:hover {
    opacity: 0.9;
  }
  .modelMargin {
    margin: 5px;
    .el-card__header {
      height: 65px;
    }
  }
  #returnBtnTop {
    height: 50px;
    background: #409eff;
    width: 100%;
    transition: all 0.3s;
  }
  .editClass {
    input.el-input__inner {
      border: none;
      background: rgba(0, 0, 0, 0) !important;
    }
  }
  .inputWidth100 {
    width: 100%;
  }
</style>
